<template>
	<el-card shadow="never" style="padding-bottom: 0px !important;margin-bottom: 0px !important;height: 100% !important;
				padding-bottom: 0px;
				">
		<el-header style="height: 35px;margin-top: -3px;margin-left: -10px;width: 100%;padding-right: 0px;justify-content:left">
			<div class="left-panel" style="width: 90%;">
			<div class="statustitleTopImg"></div>
			<span class="todotitle">资产状态统计</span>
			<!--div class="right-panel">
				<div style="width: 80px;" class="syselect,no-Clear">
					<el-select @change="loadData" size="default" style="width:100%;" v-model="zczztjxl" >
						<el-option v-for="item in searchForm" :key="item.value" :label="item.label" :value="item.value"/>
					</el-select>
				</div>
			</div-->
		</div>
			<div class="right-panel">
				<div style="width: 80px;" class="syselect,no-Clear">
					<el-select  size="default" style="width:100%;" v-model="zczztjxl" >
						<el-option v-for="item in searchForm" :key="item.value" :label="item.label" :value="item.value"/>
					</el-select>
				</div>
			</div>
				
		</el-header>
		<div style="height: 50px;display: flex;
    align-items: center; width: 148px;
  height: 32px;">
  <div class="statussl"><span class="statusslspan">数量</span></div>
  <div class="statusje"><span class="statusjespan">金额</span></div>
				</div>
		<scEcharts :height="height" :option="option" ></scEcharts>
	</el-card>
</template>

<script>
	import scEcharts from '@/components/scEcharts';
	import ExSelect from "@/components/exSelect/index.vue";
	import tool from "@/utils/tool";
	import globalparam from "@/constant/model/globalparam";

	/**
	 * 引入组件 @/components/scEcharts
	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
	 * 支持props包括 height，width，option
	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
	 */

	export default {
		name: 'chart',
		components: {
			scEcharts
		},
		props: {
			height: { type: String, default: "160px" },
		},
		data() {
			return {
				option:{
  title: {
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'right'
  },
  series: [
    {
      name: '资产状态',
      type: 'pie',
      radius: '60%',
      center: ['40%', '40%'],
      data: [
        { value: 1048, name: '在用' },
        { value: 735, name: '闲置' },
        { value: 580, name: '在库' },
        { value: 484, name: '借用' },
        { value: 300, name: '报废' }
      ],
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: true
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
    }
  ]
},
				searchForm:[{
					value:"all",label:"全部"
				}],
				manageDeptIds:tool.current.manageDeptIds(),
				manageAssetCategoryIds:tool.current.manageAssetCategoryIds(),
				zczztjxl: 'all',
				assetcategoryMap: {},
				assetcategoryNames : [],
				pathCodes: [],
				assetCategoryIds: [],
				assetStatisticsRange: '',
			}
		},
		beforeMount() {
			

		},
		methods: {
			
			
			
		
		}
	}
</script>

<style>
.xia-app-title{
		color: #141e31;
		font-size: 16px;
		font-weight: 700;
		line-height: 32px;
		top:20px;
		margin-left: 10px;
		margin-top: 30px;
	}
	.symain .el-card__body {
		padding-bottom: 0px !important;
	}

	.syselect{
		line-height: 26px;
		height: 26px;
	}
	.syselect div,.syselect input{
		line-height: 26px;
		height: 26px;
	}

	.no-Clear  .el-input__wrapper:hover .el-input__suffix{
		display: none !important;

	}
	.statustitleTopImg{
		width: 20px;
  height: 20px;
  background: url(../../../../../public/img/statustitleTop.png)
    100% no-repeat;
  background-size: 100% 100%;
  float: left;
	}
	.todotitle{
		width: 117px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFangSC-Semibold;
  text-align: left;
  white-space: nowrap;
  margin-top: 0px;
  margin-left: 5px;
  font-weight: 500;
	}
	.statussl{
		background-image: linear-gradient(
    210deg,
    rgba(224, 241, 252, 1) 0,
    rgba(224, 241, 252, 1) 0,
    rgba(196, 229, 251, 1) 100%,
    rgba(196, 229, 251, 1) 100%
  );
  border-radius: 2px;
  height: 32px;
  width: 68px;
  margin-top: 10px;
	}
	.statusslspan{
		width: 33px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(0, 56, 216, 1);
  font-size: 16px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  margin: 8px 0 0 18px;
	}

	.statusje{
		background-image: linear-gradient(
    210deg,
    rgba(231, 231, 231, 1) 0,
    rgba(231, 231, 231, 1) 0,
    rgba(209, 209, 209, 1) 100%,
    rgba(209, 209, 209, 1) 100%
  );
  border-radius: 2px;
  height: 32px;
  width: 68px;
  margin-left: 5px;
  margin-top: 10px;
	}

	.statusjespan{
		width: 33px;
  height: 15px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  margin: 8px 0 0 18px;
	}
</style>
